<template>
  <view class="container">
    <!-- 腾讯地图组件 -->
    <map
      id="lodgingMap"
      class="map"
      :latitude="centerLocation.latitude"
      :longitude="centerLocation.longitude"
      :markers="markers"
      @markertap="handleMarkerTap"
      :scale="16"
    ></map>
    
    <!-- 底部弹出的民宿信息卡片 -->
    <view class="lodging-card" v-if="selectedLodging">
      <view class="card-content" @tap="navigateToDetail">
		  <!-- 左侧图片 -->
		<image 
		    class="lodging-image" 
		    :src="imgurl+selectedLodging.imgUrl" 
		    mode="aspectFill"
		></image>
		<!-- 右侧信息区域 -->
		<view class="info-container">
		  <view class="title-row">
		    <text class="lodging-name">{{selectedLodging.title}}</text>
		    <view class="address">
		        <view class="contact" @tap.stop="makePhoneCall">
		          <text class="phone">{{adminphone[0]}}</text>
		          <text class="call-text">点击拨打</text>
		        </view>
		    </view>
		  </view>
		          
		  <view class="location-row">
		    <text class="location-text">{{selectedLodging.address}}</text>
		  </view>
		  
		</view>
      </view>
    </view>
  </view>
</template>

<script>
	import {getHouses,getRentalAdministratorByIsadmin,selectHousesByLatLng} from '@/api/homestay.js'
	import locationImg from '@/static/img/location.png'
	import config from '../../config';
export default {
  data() {
    return {
      centerLocation: {
        latitude: 0,
        longitude: 0
      },
      hospital: {
		  name:'',
		  lat:'',
		  lng:'',
		  distance:0
	  },
      markers: [],
      selectedLodging: null,
      homestayList: [],
	  dingweiImg:locationImg,
	  imgurl: config.staticUrl,
	  adminphone:[]
    }
  },
  onLoad(options) {
    // 获取医院位置信息
    this.hospital.name = options.hospitalName;
	this.hospital.lat = options.hospitalLat;
	this.hospital.lng = options.hospitalLng;
	this.hospital.distance = options.distance;
    this.initLocation();
	this.getRentalAdmin();
  },
  methods: {
    // 初始化位置
    initLocation() {
      try {
        // 获取当前位置
        this.centerLocation.latitude = parseFloat(this.hospital.lat);
		this.centerLocation.longitude = parseFloat(this.hospital.lng);
        
        // 获取周边民宿
        this.getNearbyLodgings();
      } catch (error) {
		  throw error
        uni.showToast({
          title: '获取位置信息失败',
          icon: 'none'
        });
      }
    },
    
    // 获取周边民宿信息
    getNearbyLodgings() {
		// console.log("selectHousesByLatLng:",lat,lng,distance)
      // 这里应该调用后端API获取周边民宿数据
      selectHousesByLatLng(this.hospital.lat,this.hospital.lng,this.hospital.distance).then(res => {
      		  // console.log("getHouses",res)
      	if (res.code == 200) {
			this.homestayList = res.data
			// console.log(this.homestayList,"res",res.data)
      	}
      });
	  // console.log("homestayList:",this.homestayList)
	  // 设置延时时间为2000毫秒（2秒）
	  setTimeout(() => {
	    // 延时执行的代码
	    this.updateMarkers();
	  }, 2000);
    },
    
    // 更新地图标记点
    updateMarkers() {
		// console.log("updateMarkers:",this.homestayList)
      this.markers = this.homestayList.map((homestay) => ({
              id: homestay.id,
              latitude: parseFloat(homestay.lat),
              longitude: parseFloat(homestay.lng),
              width: 30,
              height: 30,
			  iconPath: this.dingweiImg,
              callout: {
                content: homestay.title,
                padding: 10,
                borderRadius: 5,
                display: 'ALWAYS'
              }
            }));
	  // console.log("this.markers1111111111111:",this.markers)
	  // 添加医院标记
	  this.markers.push({
	    id: 0,
	    latitude: this.centerLocation.latitude,
	    longitude: this.centerLocation.longitude,
	    width: 30,
	    height: 30,
	    iconPath: this.dingweiImg,
	    callout: {
	      content: this.hospital.name,
	      padding: 10,
	      borderRadius: 5,
	      display: 'ALWAYS'
	    }
	  });
    },
    
    // 处理标记点点击
    handleMarkerTap(e) {
      const markerId = e.detail.markerId;
      const homestay = this.homestayList.find(item => item.id === markerId);
	  // console.log("homestay1111111111111:",homestay)
      if (homestay) {
        this.selectedLodging = homestay;
      }
    },
	
	getRentalAdmin(){
		var that = this;
		getRentalAdministratorByIsadmin('1').then(res => {
				  if (res.code == 200) {
					res.data.forEach(item => {
						that.adminphone.push(item.phone);
					})
				  }
				  
		});
		// console.log("phone:",that.adminphone)
	},
    
    // 拨打电话
    makePhoneCall() {
      if (this.adminphone.length>=1) {
        uni.makePhoneCall({
          phoneNumber: this.adminphone[0].toString()
        });
      }
    },
    
    // 跳转到详情页
    navigateToDetail() {
      if (this.selectedLodging) {
        uni.navigateTo({
		  url: `/pages/homestay/detail?id=${this.selectedLodging.id}`
        });
      }
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.map {
  width: 100%;
  height: 100%;
}

.lodging-card {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx;
}

.card-content {
  display: flex;
  padding: 20rpx;
}

.lodging-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 12rpx;
}

.lodging-info {
  flex: 1;
}

.info-container {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lodging-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.address {
  padding: 4rpx 8rpx;
  border-radius: 4rpx;
}

.location-row {
  margin-top: 8rpx;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8rpx;
}

.name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.address {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.price {
  font-size: 28rpx;
  color: #f60;
}

.contact {
  padding: 20rpx;
  background-color: #f8f8f8;
  border-radius: 10rpx;
  text-align: center;
}

.phone {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 6rpx;
}

.call-text {
  font-size: 24rpx;
  color: #999;
}
</style>